<script src='{$base_dir}js/jquery.tablesorter.min.js' type='text/javascript' ></script>
<script src='{$base_dir}js/jquery.tablesorter.pager.js' type='text/javascript' ></script>

{literal}
<script>

$(document).ready(function(){
	 
	$("#DrugMaterialTable1111").tablesorter(); 

	$("#DrugMaterialTable1111").bind("sortEnd",function() {
		//TODO pick drug here 
		var reqQty = parseInt("{/literal}{$reqExticketDetailInfo.quantity}{literal}");
		$("#DrugMaterialTable1111 tbody tr").each(function() {
			
			
			var id= $(this).attr("id");
			var remainQty= parseInt($("input#remainQty" + id).val());			
			var pickNum = remainQty - reqQty;
			if (pickNum <=0) {
				pickNum = remainQty;				
			} else {
				pickNum = reqQty;
			}
			reqQty -= pickNum;			
			$("input#pickedNum" + id).val(pickNum); 
			
		});

		if (reqQty > 0) {
			var buttons = {};
	        buttons[_('Close')] = function() {
	            $(this).dialog('close');        
	        };
	        generalDialog(null,_("Warn"),_("Lack of [{0}] Unit", reqQty),'warn',{
	            autoOpen: true,         
	            bgiframe: true,
	            resizable: true,
	            modal: true,                            
	            buttons: buttons
	        });			
		}
		
        
    });    
    $("#autoPickBtn").click(function() {
    	resetPickAction();
        if ($("#expiredDateMethod").is(":checked")) { 
	        // set sorting column and direction, this will sort on the first and third column the column index starts at zero 
	        var sorting = [[5,0]]; 
	        // sort on the expdate column 
	        $("#DrugMaterialTable1111").trigger("sorton",[sorting]); 
	         
        } else if ($("#importedMethod").is(":checked")) {
        	// set sorting column and direction, this will sort on the first and third column the column index starts at zero 
            var sorting = [[1,1]]; 
            // sort on the expdate column 
            $("#DrugMaterialTable1111").trigger("sorton",[sorting]);
            
        }
        // return false to stop default link action
        return false; 
    }); 
    
    var buttons = {};
    
    
	buttons[_('Cancel')] = function() {
	    $(this).dialog('close');        
	};
	
	buttons[_('Ok')] = function() {
		showMessage("statusMessage", '', 'success');
		if (!validatePickDrug()) {
			showMessage("statusMessage", _("Picked quantity must be less than remain quantity"), 'error');
			return;
		}		
		var data  = getPickedDM();
		$('div#{/literal}{$divIdData}{literal}' ).html(data);
		$('div#{/literal}{$divIdData}{literal}' ).show();
		$(this).dialog('close');
			
	};
	generalDialog('pickDrugMaterial1111',_("Pick drug/material"),null,null,{
	        autoOpen: true,         
	        bgiframe: true,
	        resizable: false,
	        modal: true,
	        width:800,
	        height:410,
	        buttons: buttons
	    });  
})

function resetPickAction() {
	$("input[name='pickedNum']").each(function() {
		$(this).val('0');
	});
}

function getPickedDM() {
	var data = '';
	var exticketDetailId = "{/literal}{$reqExticketDetailInfo.pha_req_exticket_detail_id}{literal}";
	var totalApp = 0;
	
	$("#DrugMaterialTable1111 tbody tr").each(function() {
		var id= $(this).attr("id"); 
        var pickedNum= parseInt($("input#pickedNum" + id).val());
        
        if (isNaN(pickedNum) || pickedNum <= 0) {
            return;
        }    
        totalApp += pickedNum;
        data += '<input name="approvedRefId' + exticketDetailId + '[]" value="' + id + '" type="hidden">';        
        data += '<input name="approvedNum' + exticketDetailId + '[]" value="' + pickedNum + '" type="hidden">';
        
        
    });
	var lcInt = locale(decimalPoint, thousandSep, 0);
    var allData =  '<span style="text-align: left;float: left;">';     
    allData += toLcString(totalApp,lcInt);
    allData += '</span>';
    data += '<input name="totalApprovedNum' + exticketDetailId + '" value="' + totalApp + '" type="hidden">';
    allData += data;    
    return allData;
}

function validatePickDrug() {
	var validity = true;
	$("#DrugMaterialTable1111 tbody tr").each(function() {
		var id= $(this).attr("id");
	    var remainQty = parseInt($("input#remainQty" + id).val());
	    var picked = parseInt($("input#pickedNum" + id).val());
	    if (!isNaN(remainQty) && !isNaN(picked)) {
		    if (picked > remainQty) {
		    	validity = false;
		    }		    
	    }
	});

	return validity;
}

   


</script>
{/literal}
<div id="pickDrugMaterial1111">
<div style="margin-top: 0px;" class="lab_grid">
<span id='statusMessage' style="font-style:italic; color: red;">&nbsp;</span>
<br>
<span class="label" style="float: left;">{translate}Name{/translate}:&nbsp;&nbsp;</span>
<div style="width: 150px;float: left;">{$reqExticketDetailInfo.proprietary_name}&nbsp;</div>
<span class="label" style="float: left;">{translate}Req Qty{/translate}:&nbsp;&nbsp;</span>
<div style="width: 75px;float: left;">{$reqExticketDetailInfo.quantity_formatted}&nbsp;</div>
<span class="label" style="float: left;">{translate}Unit{/translate}:&nbsp;&nbsp;</span>
<div style="width: 75px;float: left;">{$reqExticketDetailInfo.enum_unit_import_sell_text}&nbsp;</div>
<br>
<br>
<input type="radio" id="expiredDateMethod" value="2" name="pickMethod" checked="checked"><label for="expiredDateMethod">{translate}Expired date{/translate}</label>
<input type="radio" id="importedMethod" value="1" name="pickMethod"><label for="importedMethod">{translate}latest import ticket{/translate}</label>
<input type="button" value="{translate}Auto pick{/translate}" id="autoPickBtn">
<br>
<br>
<div class="h_div">
<table cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th style="width: 30px;">{translate}Order number{/translate}</th>
            <th style="width: 200px;">{translate}Import ticket code{/translate}</th>
            <th style="width: 75px;">{translate}Lot{/translate}</th>
            <th style="width: 75px;">{translate}Remain Qty{/translate}</th>
            <th style="width: 75px;">{translate}Unit{/translate}</th>
            <th style="width: 145px;">{translate}Expired date{/translate}</th>            
            <th style="border-right: none;" class="last">&nbsp;&nbsp;&nbsp;</th>            
        </tr>
    </thead>
</table>
</div>
<div class="b_div" style="height: 200px; border-top: 1px solid #DDDDDD;" >
<table id="DrugMaterialTable1111" cellspacing="0" cellpadding="0" border="0" >
    <thead>
        <tr style="display: none;">
            <th style="width: 30px; ">Order number</th>
            <th style="width: 200px; ">Import ticket code</th>
            <th style="width: 75px; ">Lot</th>
            <th style="width: 75px; ">Remain Qty</th>
            <th style="width: 75px; ">Unit</th>
            <th style="width: 145px; ">expDNum</th> 
            <th style="width: 145px; ">Expired date</th>            
            <th style="border-right: none; " class="last">&nbsp;&nbsp;&nbsp;</th>            
        </tr>
    </thead>
    <tbody>
        {assign var="count" value=1}
        {foreach from=$allowSellDMList item=item}
         <tr id="{$item.pha_ewh_imticket_detail_id}">
            <td style="width: 30px;">{$count++}</td>
            <td style="width: 200px;"><div style="width: 200px;white-space: normal;">{$item.imticket_code}</div></td>
            <td style="width: 75px;"><div style="width: 75px;white-space: normal;">{$item.im_lot}</div></td>
            <td style="width: 75px;">
            <div style="width: 75px;white-space: normal;">{$item.remain_quantity_formatted}</div>
            <input type="hidden" id="remainQty{$item.pha_ewh_imticket_detail_id}" value="{$item.remain_quantity}">
            </td>
            <td style="width: 75px;"><div style="width: 75px;white-space: normal;">{$item.enum_unit_import_sell_text}</div></td>
            <td style="width: 145px; display: none;">A{$item.im_expired_date_to_number}</td>
            <td style="width: 145px;">
            <div style="width: 145px;white-space: normal;">{$item.im_expired_date_formatted}</div>                
            </td>
            <td style="border-right: none;">
                <input onkeypress="return allowEnterIntegerNum(event,true)" name="pickedNum" id="pickedNum{$item.pha_ewh_imticket_detail_id}" value="0" size="10">
            </td>            
        </tr>
        {/foreach}       
    </tbody>
</table>
</div>
</div>						
</div>